<template>
  <border
    class="energy-consumption-in-park"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="module-content-top">
        <octagon
          v-for="(item, index) in octagon"
          :key="index"
          :iconSrc="item.iconSrc"
          :octagonImg="item.octagonImg"
          :octagonName="item.octagonName"
          :octagonNumber="octagonMessage[index]"
          :octagonUnit="item.octagonUnit"></octagon>
      </div>
      <div class="module-content-bottom">
        <bar-line ref="barLine"
                  :title="barLineConfig.title"
                  :axis="barLineConfig.axis"
                  :xAxis="barLineConfig.xAxis"
                  :yAxis="barLineConfig.yAxis"
                  :dataZoom="barLineConfig.dataZoom"
                  :grid="barLineConfig.grid"
                  :config="barLineConfig.config"
                  :tooltipsConfig="barLineConfig.tooltipsConfig"
                  :seriesData="barLineConfig.seriesData"></bar-line>
        <div class="chart-legend">
          <div class="legend" v-for="(item, index) in barLineName" :key="index">
            <div class="legend-li" v-if="index < limitLength - 1">
              <i :style="{'background': barColor[index]}"></i>
              <span>{{ item.length > 4 ? item.substring(0, 4) : item }}</span>
            </div>
            <div class="legend-li" v-if="index == limitLength - 1">
              <i :style="{'background': barColor[index]}"></i>
              <span>{{ barLineName === 5 ?item.length > 4 ? item.substring(0, 4) : item : '其他' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Octagon from './../components/Octagon.vue'
import BarLine from './../components/BarLine.vue'
export default {
  name: 'energyConsumptionInPark',
  components: {
    Border,
    Octagon,
    BarLine
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '园区能耗详情',
        goPageUrl: ''
      },
      octagonMessage: [0, 0, 0],
      octagon: [
        {
          iconSrc: require('./../../assets/images/module/icon/electric.png'),
          octagonImg: require('./../../assets/images/module/background/background-3-2.png'),
          octagonName: '今日耗电总览',
          octagonNumber: '',
          octagonUnit: 'kW·h'
        },
        {
          iconSrc: require('./../../assets/images/module/icon/water.png'),
          octagonImg: require('./../../assets/images/module/background/background-3-2.png'),
          octagonName: '今日水能总览',
          octagonNumber: '600',
          octagonUnit: 'T'
        }
      ],
      barLineConfig: {
        title: {
          text: ''
        },
        axis: {
          xAxisNameLength: 5,
          xAxisNameLengthSymbol: ''
        },
        dataZoom: {
          show: true,
          right: 10,
          endValue: 4
        },
        grid: {
          top: 50,
          bottom: 10
        },
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: []
        },
        yAxis: [
          {
            splitNumber: 4,
            name: '本周水能趋势(T)',
            nameTextStyle: {
              color: '#FFFFFF',
              align: 'left',
              padding: [0, 0, 0, 40]
            }
          },
          {
            splitNumber: 4,
            name: '本周电能趋势(kW.h)',
            nameTextStyle: {
              color: '#FFFFFF',
              align: 'right',
              padding: [0, 70, 0, 0]
            }
          }
        ],
        tooltipsConfig: {
          tipsColor: ['#2e92cb', '#f29f46'],
          symbol: ['T', 'kW.h']
        },
        seriesData: []
      },
      barLineName: ['水能', '电能'],
      limitLength: 5,
      barColor: ['#2e92cb', '#f29f46'], // 数据
      refreshInterval: 0,
      apiData: {}
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 获取数据
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.wisdomParkApi.nowAndLast7Day({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            this.apiData = res.data.data
            this.octagonMessage = [res.data.data.nowDayElectric, res.data.data.nowDayWater]
            if (!isRefresh) {
              this.handleData()
            }
          } else {
            this.apiData = {}
            this.octagonMessage = [0, 0]
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
        }, res => {
          this.apiData = {}
          this.octagonMessage = [0, 0]
          this.$parent.showTips('请求失败，点击确认继续刷新')
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let dataZoomLength = window.screen.width > 1890 ? 6 : 4
      let seriesData = []
      let seriesData1 = []
      let xData = []
      if (JSON.stringify(data) !== '{}') {
        data.waterTrend.forEach((item, index) => {
          xData.push(item.name.substring(5, item.name.length))
          seriesData.push(Number(item.count))
          seriesData1.push(Number(data.electricTrend[index].count))
        })
      }
      if (xData.length > dataZoomLength) {
        this.barLineConfig.dataZoom.show = true
      } else {
        this.barLineConfig.dataZoom.show = false
      }
      this.barLineConfig.xAxis.data = xData
      this.barLineConfig.seriesData = [
        {
          data: seriesData,
          name: '水能',
          colorIndex: 0,
          yAxisIndex: 0,
          isBar: false
        },
        {
          data: seriesData1,
          name: '电能',
          colorIndex: 2,
          yAxisIndex: 1,
          isBar: false
        }
      ]
    },
    resizeChart () {
      if (this.$refs.barLine) {
        this.$refs.barLine.resizeChart()
      }
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.energyConsumptionInParkTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.energyConsumptionInParkTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.energyConsumptionInParkTimer)
  }
}
</script>
<style lang="scss" scoped>
.energy-consumption-in-park {
  .module-content {
    width: 100%;
    height: 100%;
    .module-content-top {
      width: calc(100% - 16.88%);
      margin-left: 8.44%;
      overflow: hidden;
    }
    .module-content-bottom {
      width: 100%;
      height: 60%;
      margin-top: 10px;
    }
    & /deep/ .bar-line {
      // height: calc(100% - 10px)
    }
    .chart-legend {
      overflow: hidden;
    }
    .octagon {
      width: 156px;
      // width: calc((100% - 10px) /2 );
      margin-top: 3px;
      &:nth-of-type(even) {
        float: right;
      }
      & /deep/ .octagon-icon-img {
        width: 34px;
        padding: 0 5px;
        display: flex;
        align-items: center;
      }
      & /deep/ .octagon-message{
        width: calc(100% - 44px);
      }
    }
    .legend {
      display: inline-block;
      margin: 0 25px 0 0;
      font-size: 14px;
      height: 22px;
      line-height: 22px;
      color: #A4B3C7;
    }
    .legend-li {
      height: 100%;
      i {
        display: block;
        float: left;
        width: 9px;
        height: 9px;
        vertical-align: top;
        margin: 7px 5px 0 0;
      }
      span {
        display: inline-block;
      }
    }
  }
}
@media screen and (min-width: 1890px) {
  .energy-consumption-in-park {
    .module-content {
      .octagon {
        width: 186px;
        margin-top: 5px;
        &:nth-of-type(even) {
          float: right;
        }
        & /deep/ .octagon-icon-img {
          width: 42px;
          padding: 0 5px;
          display: flex;
          align-items: center;
        }
        & /deep/ .octagon-message{
          width: calc(100% - 52px);
        }
      }
    }
  }
}
</style>
